@import "./base.scss";

.overflow{
    height: 100%;
    overflow: hidden;
}
.cart-container{
    padding: 1rem .24rem;
    height: 100%;
    .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9;
        background: white;
        .top-bar{
            text-align: center;
            padding: .24rem;
            height: .8rem;
            @include bottom-border-1px($c-ef);
            div{
                width: 2rem;
                font-size: .32rem;
                color: $c-2a;
                &.left,&.right{
                    width: 1rem;
                    font-size: .26rem;
                    text-align: right;
                }
            }
        }
    }

    .cart-list{
        padding-bottom:2.3rem;
        .cart-card{
            padding: .24rem;
            border-radius: $radius-10;
            background: $c-fb;
            position: relative;
            margin-bottom: .2rem;
            .left{
                height: 1.1rem;
                padding: .4rem .2rem .4rem 0;
                .check-label{
                    display: block;
                    input[type="checkbox"]{
                        position: absolute;
                        left: -9999rem;
                    }
                    .icon-checked{
                        display: block;
                        width: .3rem;
                        height: .3rem;
                        border-radius: .15rem;
                        border:1px solid $c-99;                           
                    }
                    input[type="checkbox"]:checked + i{
                        border: none;
                        background: url("../images/icon/icon_17.png") no-repeat;
                        background-size: 100%;
                    }
                }
            }
            .img{
                height: 1.61rem;
                width: 1.61rem;
                border-radius: $radius-10;
                overflow: hidden;
            }
            .right{
                flex:1;
                height:1.62rem;
                padding-left: .24rem;
                .name{
                    font-size: .26rem;
                    color: $c-33;
                }
                .size{
                    color: $c-99;
                    font-size: .22rem;
                    .birthday{
                        color: $c-ffba17;
                    }
                }
                .price{
                    color:$c-33;
                    font-size: .28rem;
                }
                .count-box{
                    position: absolute;
                    right: .2rem;
                    bottom: .2rem;
                    width: 1.6rem;
                    height: .4rem;
                    .minus,.plus{
                        display: block;
                        height: .4rem;
                        width: .4rem;
                        border-radius: .2rem;
                        overflow: hidden;
                    }
                    .minus{
                        background: url("../images/icon/icon_18.png") no-repeat;
                        background-size: 100%;
                    }
                    .plus{
                        background: url("../images/icon/iocn_3.png") no-repeat;
                        background-size: 100%;
                    }
                    input{
                        font-size: .28rem;
                        color: $c-33;
                        width: .7rem;
                        height: .4rem;
                        text-align: center;
                    }
                }
            }

        }
    }
    .bottom-bar{
        position: fixed;
        bottom: .98rem;
        width: 100%;
        left: 0;
        height: 1.58rem;
        background: white;
        .tip{
            height: .6rem;
            background: $c-99;
            font-size: .26rem;
            font-weight: bold;
            color: white;
            line-height: .6rem;
            font-family: $f-Medium;
            span{
                color: $c-ffba17;
            }
        }
        .settlement{
            height: .98rem;
            line-height: .98rem;
            .left{
                flex: 1;
                .check-label{
                    display: block;                
                    margin-left: .3rem;
                    input[type='checkbox']{
                        position: absolute;
                        left: -9999rem;
                    }
                    .icon-checked{
                        display: block;
                        width: .3rem;
                        height: .3rem;
                        border: 1px solid $c-99;
                        border-radius: .15rem;
                    }
                    input[type='checkbox']:checked + i{
                        border:none;
                        background: url("../images/icon/icon_17.png") no-repeat;
                        background-size: 100% 100%;

                    }
                }
                .right{
                    flex: 1;
                    padding: 0 .3rem;
                    font-size: .24rem;
                    color: $c-33;
                    .total{
                        font-size: .3rem;
                        // font-family: $f-Medium;
                    }
                }        
            }
            .settlement-btn{
                width: 2.84rem;
                height: 100%;
                background: $c-ffba17;
                color: white;
                font-weight: bold;
                font-size: .3rem;
                text-align: center;
            }
        }
    }

     // 底部导航
     .navBar {
        @include top-border-1px($c-ef);
        position: fixed;
        padding-top: .1rem;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: .98rem;
        background: $c-ff;
        z-index: 9;
        .navItem {
            display: block;
            flex: 1;
            text-align: center;
            .icon {
                margin: 0 auto;
            }
            .icon-home {
                width: .28rem;
                height: .34rem;
            }
            .icon-all,
            .icon-customer {
                width: .34rem;
                height: .34rem;
            }
            .icon-cart {
                width: .4rem;
                height: .34rem;
            }
            .icon-member {
                width: .37rem;
                height: .3rem;
            }
            .text {
                font-family: "PingFang SC Bold";
                color: $c-33;
                font-size: .22rem;
                padding-top: .1rem;
            }
        } //当前导航
        .active {
            .text {
                color: $c-ffba17;
            }
        }
    }

    //弹窗
    .birthday-modual{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(0,0,0,0.2);
        opacity: 0;
        visibility: hidden;
        z-index: 99;
        transition: all .5s;
        .content{
            padding-top: .5rem;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 9.26rem;
            background: url("../images/index/bj.png") no-repeat;
            background-size: 100% 100%;
            transform: translate3d(0,100%,0);
            transition: all .5s;
            color: $c-33;
            .top{
                height: 1rem;
                line-height: 1rem;
                @include bottom-border-1px($c-ef);
                font-size: .33rem;
                .left,.close{
                    width: .26rem;
                    height: .26rem;
                    margin: 0 .24rem;
                }
                .close{
                    background: url("../images/icon/icon_14.png") no-repeat;
                    background-size: 100% 100%;
                }
            }
            .birthday-text{
                padding: .24rem;
                font-size: .3rem;
                color: $c-33;                
                .radio-label{
                    height: 1.32rem;
                    padding: 0 .24rem;
                    background: $c-fb;
                    border-radius: $radius-10;
                    margin-bottom: .23rem;
                    .user-text{
                        color: $c-99;
                        background: none;
                        line-height: .5rem;
                        &::-webkit-input-placeholder{
                            text-align: center;
                        }
                    }
                    .left,.right-radio{
                        display: block;
                        width: 1.5rem;
                    }
                    .right-radio{
                        padding-left: 1.2rem;
                        input[type='radio']{
                            position: absolute;
                            left: -9999rem;
                        }
                        .icon-checked{
                            display: block;
                            width: .3rem;
                            height: .3rem;
                            background: url("../images/icon/icon_19.png") no-repeat;
                            background-size: 100% 100%;
                        }
                        input[type='radio']:checked + i{
                            background:url("../images/icon/icon_17.png") no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
                .confirm{
                    position: absolute;
                    left: .24rem;
                    bottom: .24rem;
                    width: 7rem;
                    height: .9rem;
                    background: $c-ffba17;
                    line-height: .9rem;
                    color: white;
                    border-radius: .45rem;
                    text-align: center;
                    font-size: .3rem;
                }
            }
        }
    }
    .show{
        opacity: 1;
        visibility: visible;
        .content{
            transform: none;
        }
    }

}
// weui confirm
    .weui-dialog{
        border-radius: .2rem;
        width: 5.2rem;
    }
    .weui-dialog__title{
        font-size: .3rem;
        font-weight: bold;
        font-family: $f-Bold;
        color: $c-33;
    }
    .weui-dialog__bd{
        font-size: .26rem;
        color: $c-33;
    }
    .weui-dialog__btn_default,.weui-dialog__btn_primary{
        color: $c-ffba17;
        font-size: .28rem;
        font-weight: bold;
        font-family: $f-Bold
    }